import React, { useState, useEffect } from 'react';
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
import { getUrlIdentity } from '@/utils/api/api'
// 如果想在函数组件中，使用类似于生命周期的函数。16.8 -> react Hooks

const LeftNavWrapper = styled.ul`
  li {
    .active {
      background:red;
      padding:10px 10px;
      color: #fff;
    }
  } 
`

const LeftNav = (props) => {
  const [leftUrl, setLeftUrl] = useState([])
  useEffect(() => {
    // 请求身份数据
    getUrlIdentity()
      .then(res => {
        setLeftUrl(res.data)
      })
  }, [])
  return <LeftNavWrapper>
    {
      // console.log('leftUrl------>', leftUrl);
      leftUrl && leftUrl.map((item, index) => {
        return <li key={item.path} style={{
          width: '100%',
          height: '60px',
          lineHeight: '60px',
          textAlign: "center"
        }}>
          <NavLink to={item.path}>
            {item.text}
          </NavLink>
        </li>
      })
    }
  </LeftNavWrapper>
}

export default LeftNav;